<template>
  <div id="dailyMent" v-loading="toloading">
    <div class="dailyTop">
      <span class="datamet" @click="datyMent()">日报管理</span
      >&nbsp;&nbsp;>&nbsp;
      <span class="datalog" v-if="this.$route.query.typeId == 1">历史任务</span>
      <span class="datalog" v-if="this.$route.query.typeId == 2">历史计划</span>
    </div>
    <!-- 日报历史列表 -->
    <div class="taskList" v-if="dataList.length != 0">
      <div class="taskTile">
        <div class="titconet">
          <span>{{ name }}</span>
          <span v-if="groupName !== '全部职能组'">{{ groupName }}</span>
        </div>
        <span>
          <el-select
            v-model="projectId"
            placeholder="选择项目"
            clearable
            size="small"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </span>
        <span>
          <el-date-picker
            v-model="startDate"
            value-format="yyyy-MM-dd"
            type="date"
            size="small"
            placeholder="任务日期"
          ></el-date-picker>
        </span>
        <span>
          <el-button @click="changeDate" size="small" type="primary"
            >查询</el-button
          >
        </span>
      </div>
      <div class="web">
        <div class="fulfill">
          <el-table
            border
            :data="dataList.records"
            tooltip-effect="dark"
            :header-cell-style="{ background: '#F9F9F9' }"
            style="width: 100%"
          >
            <el-table-column
              prop="deptName"
              align="center"
              label="职能组"
            ></el-table-column>
            <el-table-column
              prop="username"
              align="center"
              label="姓名"
            ></el-table-column>
            <el-table-column
              value-format="yyyy-MM-dd"
              prop="taskDate"
              align="center"
              label="任务日期"
              v-if="typeId == 1"
            ></el-table-column>
            <el-table-column
              value-format="yyyy-MM-dd"
              prop="taskDate"
              align="center"
              label="计划日期"
              v-if="typeId == 2"
            ></el-table-column>
            <el-table-column
              prop="projectName"
              align="center"
              label="项目名称"
            ></el-table-column>
            <el-table-column
              prop="time"
              align="center"
              label="工时（天）"
              v-if="typeId == '1'"
            ></el-table-column>
            <el-table-column
              prop="content"
              align="left"
              width="400"
              label="工作内容"
            ></el-table-column>
            <el-table-column
              value-format="yyyy-MM-dd"
              prop="createTime"
              align="center"
              label="上报时间"
            >
              <template slot-scope="scope">{{
                scope.row.createTime | dateFormat
              }}</template>
            </el-table-column>
            <el-table-column
              prop="isConfirm"
              align="center"
              label="状态"
              :formatter="isConfirmFalg"
            ></el-table-column>
            <el-table-column
              prop="confirmName"
              align="center"
              label="确认人"
            ></el-table-column>
            <el-table-column
              prop="id"
              align="center"
              label="操作"
              fixed="right"
              width="250"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="scope.row.isConfirm == 0 && flag"
                  type="info"
                  plain
                  size="mini"
                  @click="editClick(scope.row)"
                  >修改</el-button
                >
                <el-button
                  v-if="scope.row.isConfirm == 0 && flag"
                  type="danger"
                  plain
                  size="mini"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >

                <el-button
                  v-if="scope.row.permission == 1 && scope.row.isConfirm == 0"
                  type="success"
                  size="mini"
                  plain="plain"
                  @click="handleEdit(scope.row)"
                  title="确认"
                  >确认</el-button
                >
                <el-button
                  v-if="
                    scope.row.confirmName != null &&
                    scope.row.cancelPermission === 1 &&
                    scope.row.isConfirm == 1
                  "
                  size="mini"
                  type="warning"
                  plain
                  @click="handleCancelClick(scope.row)"
                  >取消确认</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-top: 10px; text-align: right"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div class="taskList" v-if="dataList.length == 0">
      <p>--暂无数据--</p>
    </div>

    <Dialog ref="dialog" />
    <EditDialog ref="edit_dialog" @edit_dialog_success="edit_dialog_success" />
  </div>
</template>
<script>
import {
  historyTask,
  confirm,
  deleteTask,
  getcancelConfirm,
} from "@/service/Api.js";
import Dialog from "./dialog";
import EditDialog from "./editDay";
import { mapGetters } from "vuex";
import { selectUserProject } from "@/service/Api";

export default {
  name: "dailyDialog",
  components: { Dialog, EditDialog },
  data() {
    return {
      flag: false,
      projectId: undefined,
      fid: "",
      options: [],
      //传过来的参数
      startDate: "",
      id: this.$route.query.id,
      typeId: this.$route.query.typeId,
      name: this.$route.query.name,
      groupName: this.$route.query.groupName,
      permission: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      dataList: [],
      username: "",
      deptName: "",
      toloading: false,
      pn: 1,
      ps: 10, 
      count: 0,
    };
  },
  computed: {
    ...mapGetters(["typeId_"]),
  },
  created() {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    if (month < 10) {
      month = "0" + month;
    }
    if (day < 10) {
      day = "0" + day;
    }
    if (JSON.parse(sessionStorage.getItem("userInfo")).name == this.name) {
      this.flag = true;
    } else {
      this.flag = false;
    }
    this.dailyList();
    this.projectList();
  },
  methods: {
    projectList() {
      selectUserProject({ keyword: "" }).then((res) => {
        if (res.code == 0) {
          this.options = res.data;
        } else {
          this.$message.error(`${res.message}`);
        }
      });
    },
    edit_dialog_success() {
      this.dailyList();
    },
    handleSizeChange(val) {
      this.ps = val;
      this.dailyList();
    },
    handleCurrentChange(val) {
      this.pn = val;
      this.dailyList();
    },
    isConfirmFalg(row, column) {
      return row.isConfirm == 0 ? "待确认" : "已确认";
    },
    changeDate() {
      this.pn = 1;
      this.dailyList();
    },
    //查询
    dailyList() {
      this.toloading = true; //加载
      let data = {
        pn: this.pn,
        ps: this.ps,
        uid: this.id,
        typeId: this.typeId,
        startDate: this.startDate,
        projectId: this.projectId,
      };
      historyTask(data).then((res) => {
        this.toloading = false;
        if (res.code == 0) {
          this.dataList = res.data;
          this.count = res.data.total;
        } else {
          this.dataList = [];
        }
      });
    },
    //返回日报管理
    datyMent() {
      this.$router.push({ path: "/daily" });
    },
    //确认状态
    handleEdit(row) {
      this.$confirm("是否确认?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          confirm(row.id);
          this.$message.success("操作成功!");
          this.dailyList();
        })
        .catch(() => {
          //  this.$message.info("已取消!");
        });
    },
    // 取消确认日报
    handleCancelClick(row) {
      this.$confirm("是否取消确认?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          getcancelConfirm(row.id);
          this.$message.success("操作成功!");
          this.dailyList();
        })
        .catch(() => {
          //  this.$message.info("已取消!");
        });
    },

    handleDelete(row) {
      this.$confirm("此操作将永久删除,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deleteTask(row.id).then((res) => {
            if (res.code == 0) {
              this.$message.success("删除成功!");
              this.dailyList();
            } else {
              this.$message.warning(res.message);
            }
          });
        })
        .catch(() => {});
    },
    editClick(row) {
      //判断是修改计划还是日报
      if (this.$route.query.typeId === 2) {
        this.$refs.dialog.showDialog(row);
      } else {
        this.$refs.edit_dialog.showDialog(row);
      }
    },
  },
};
</script>

<style scoped>
.titconet {
  width: 74%;
  text-align: center;
  font-size: 15px;
}

.titconet span:nth-child(1) {
  font-weight: bold;
  font-size: 23px;
}

.datalog {
  font-weight: bolder;
}

.datamet {
  cursor: pointer;
}

.datamet:hover {
  color: red;
}

#dailyMent {
  height: 100%;
}

.dailyTop {
  display: flex;
  padding: 20px 20px 0 20px;
}

.taskList p {
  color: #999;
  font-size: 16px;
  text-align: center;
}

.taskTile {
  display: flex;
  align-items: center;
  margin: 10px 20px 0 20px;
  padding: 10px 10px;
  border: 1px solid #e8eef5;
  background: #f9f9f9;
}

.taskTile i {
  font-size: 22px;
  color: #34b79a;
}

.taskTile h3,
.taskTile span {
  margin-right: 20px !important;
}

.tody {
  width: 15%;
}

.fulfill {
  width: 100%;
}

.tomorrow {
  width: 30%;
}

.web {
  margin-top: 0;
}

.web h3 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  border-top: 1px solid #e8eef5;
  border-left: 1px solid #e8eef5;
  padding: 10px 5px;
  background: #f9f9f9;
}

.web .tomorrow h3 {
  border-right: 1px solid #e8eef5;
}

.web h3 span:first-child {
  width: 100%;
  display: flex;
  justify-content: center;
  flex: 1;
}

.web h3 span:last-child {
  color: #999;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.web h3 span:last-child:hover {
  color: red;
}
</style>
